<template>
  <el-backtop :bottom="60"></el-backtop>
  <el-container class="home-container">
    <!--头部布局-->
    <el-header>
      <div>
        <span>M B T I 测试平台</span>
      </div>
      <el-button type="primary" @click="getHistory">{{ username }}</el-button>
    </el-header>
    <el-container>
      <el-main>
        <el-row type="flex" justify="center" align="top">
          <el-col :span="20.5" class="card1">
            <h2 class="main-title">M B T I<h4 class="main-title-sub">最近30天测试次数: {{ recentNum }} </h4>
            </h2>

            <el-card class="box-card" style="height: 50%">
              <template #header>
                <div class="card-header">
                  <span>第 {{ idx + 1 }} / 93 题</span>
                </div>
              </template>


              <el-divider></el-divider>
              <div style="text-align: center; font-size: 28px;">{{ info }}</div>
              <el-divider></el-divider>

              <el-row type="flex" justify="center">
                <el-button color="#ff0000" :dark="isDark" class="button" @click="chooseA()">A:
                  {{ OPa
                  }}
                </el-button>
              </el-row>
              <el-row gutter="20" type="flex" justify="center">
                <el-button color="#0000ff" :dark="isDark" class="button" @click="chooseB()">B:
                  {{ OPb
                  }}
                </el-button>
              </el-row>
              <el-row>
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
              </el-row>
            </el-card>
            <el-divider></el-divider>
            <el-card class="text-box">
              <el-row justify="center">测试后，您将</el-row>
              <el-row justify="center">
                | 获取您的4字母类型测试结果
                · 知悉您的偏好优势和类型描述
                · 发现最适合您性格类型的职业
                · 了解您的沟通风格和学习风格 |
              </el-row>
              <el-row justify="center">
                所有内容基于卡尔·荣格(Carl Jung)和伊莎贝尔·布里格斯·迈尔斯(Isabel Briggs Myers)的MBTI理论实证
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>

  <el-dialog title="信息" v-model="infoVisible" width="500px">
    <el-descriptions title="">
      <el-descriptions-item label="姓名">
        <el-tag size="small">{{ Name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="学号">
        <el-tag size="small">{{ No }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="年龄">
        <el-tag size="small">{{ Age }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-tag size="small">{{ Sex }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="身份">
        <el-tag size="small">学生</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <el-scrollbar height="300px">
      <el-table table-layout="auto" :data="Result" style="width: auto" :header-cell-style="{
        background: '#fafafa',
        color: '#606266',
      }" :default-sort="{ prop: 'Time', order: 'descending' }">
        <el-table-column prop="Time" label="测试时间" width="180" align="center" />
        <el-table-column prop="Type" label="测试结果" width="180" align="center" />
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template #default="scope">
            <el-button class="reset-margin" link type="primary" :size="size" @click="ansDialog(scope.row.Time)">
              查看结果
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="logout">退出登录</el-button>
        <el-button @click="infoVisible = false">返回</el-button>
      </span>
    </template>
  </el-dialog>

  <el-drawer v-model="resVisible" title="性格分析报告" direction="btt" :before-close="handleClose" size="75%">
    <el-row style="font-size:20px;" justify="center">感谢您耐心的完成测试，你属于</el-row>
    <br />
    <el-row style="font-size:20px;" justify="center">{{ Tno }} | {{ Type }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[0] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[1] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[2] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[3] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[4] }}</el-row>
    <br />
    <el-row style="font-size:22px;" justify="center">{{ Tcontent[5] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[6] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[7] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[8] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[9] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[10] }}</el-row>
    <br />
    <el-row style="font-size:16px;" justify="center">{{ Tcontent[11] }}</el-row>
    <br />
  </el-drawer>

  <el-dialog title="M B T I 测试前须知" v-model="readmeVisible" width="50%">
    <span style="font-size: 19px;">1. 参加测试的人员请务必诚实、独立地回答问题,只有如此,才能得到有效的结果.</span><br />
    <br />
    <span style="font-size: 19px;">2. 《性格分析报告》展示的是你的性格倾向,而不是你的知识、技能、经验. </span><br />
    <br />
    <span style="font-size: 19px;">3.
      MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用,性格类型没有好坏,只有不同.每一种性格特征都有其价值和优点,也有缺点和需要注意的地方.</span><br />
    <br />
    <span style="font-size: 19px;">4. 清楚地了解自己的性格优劣势,有利于更好地发挥自己的特长,而尽可能的在为人处事中避免自己性格中的劣势.更好地和他人相处,更好地作重要的决策.</span><br />
    <br />
    <span style="font-size: 19px;">5. 本测试分为四部分,共93题;需时约18分钟.</span><br />
    <br />
    <span
      style="font-size: 19px; text-align: center;">只要你是认真、真实地填写了测试问卷,那么通常情况下你都能得到一个确实和你的性格相匹配的类型.希望你能从中或多或少地获得一些有益的信息.</span><br />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="readmeVisible = false">我已知晓</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="你的选择" v-model="ansVisible" width="500px">
    <el-scrollbar height="300px">
      <el-table table-layout="auto" :data="choice" style="width: auto" :header-cell-style="{
        background: '#fafafa',
        color: '#606266',
      }" :default-sort="{ prop: 'No', order: 'acending' }">a
        <el-table-column prop="No" label="题号" width="120" align="center" />
        <el-table-column prop="ch" label="选项内容" width="350" align="center" />
      </el-table>
    </el-scrollbar>
  </el-dialog>

</template>

<script>
import { ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      readmeVisible: false,
      resVisible: false,
      infoVisible: false,
      ansVisible: false,
      Name: window.sessionStorage.getItem("Name"),
      No: window.sessionStorage.getItem("No"),
      Sex: window.sessionStorage.getItem("Sex"),
      Age: window.sessionStorage.getItem("Age"),
      Result: [],
      questionlist: [],
      choice: [],
      answer: { "E": 0, "I": 0, "S": 0, "N": 0, "T": 0, "F": 0, "J": 0, "P": 0 },
      resType: {
        "ISTJ": "物流师型人格",
        "ISFJ": "守卫者型人格",
        "INFJ": "提倡者型人格",
        "INTJ": "建筑师型人格",
        "ISTP": "鉴赏家型人格",
        "ISFP": "探险家型人格",
        "INFP": "调停者型人格",
        "INTP": "逻辑学家型人格",
        "ESTP": "企业家型人格",
        "ESFP": "表演者型人格",
        "ENFP": "竞选者型人格",
        "ENTP": "辩论家型人格",
        "ESTJ": "总经理型人格",
        "ESFJ": "执政官型人格",
        "ENFJ": "主人公型人格",
        "ENTJ": "指挥官型人格",
      },
      resContent: {
        "ISTJ": "诚实和直接——诚信是你人格类型的核心。情绪操纵、心理游戏和令人安心的谎言都与你以朴素诚实来管理他们遇到的现实情况的偏好背道而驰。&意志坚强，尽职尽责——物流人员在他们的行动中也体现了这种诚信，努力工作并专注于他们的目标。耐心和坚定，具有你人格类型的人履行他们的义务。&非常负责任——你的话就是承诺，承诺意味着一切。你宁愿在额外的日子里让自己陷入困境并失去睡眠，也不愿无法提供他们所说的结果。&冷静而务实——如果你在每一个困难的迹象下发脾气并崩溃，他们的任何承诺都没有多大意义——他们脚踏实地，做出清晰、理性的决定。&创建和执行秩序——任何你的主要目标是有效地执行他们选择做的事情，并且他们相信，当所有相关人员都确切地知道发生了什么以及为什么要做到这一点时，这是最好的。&但&固执——事实就是事实，你抵制任何不受他们支持的新想法。基于事实的决策过程也使具有你性格类型的人难以接受他们在某件事上的错误——但任何人都可能错过任何细节。&麻木不仁——虽然不是故意苛刻，但你经常通过简单的口头禅伤害更敏感类型的感情，即诚实是最好的政策。你可能会考虑情绪，但实际上只能确定最有效的方式来表达需要说的话。&默守陈规——你认为，明确定义的规则最适合工作，但这使他们不愿意改变这些规则或尝试新事物，即使不利因素很小。真正的非结构化环境让你几乎瘫痪。&判断性——意见就是观点，事实就是事实，你不太可能尊重不同意这些事实的人，尤其是那些故意不了解这些事实的人。&经常不合理地责备自己——所有这些都可以使物流人员相信他们是唯一能够可靠地看到项目的人。&.",
        "ISFJ": "支持——你是万能的帮手，他们与任何需要的人分享他们的知识、经验、时间和精力，尤其是与朋友和家人。具有这种性格类型的人争取双赢，尽可能选择同理心而不是判断力。&可靠和耐心——你不会提供零星的、兴奋的匆忙而使事情完成一半，而是一丝不苟、谨慎，采取稳定的方法并根据情况的需要弯曲，以实现他们的最终目标。&富有想象力和观察力——你非常富有想象力，并利用这种品质作为同理心的附属品，观察他人的情绪状态并从他们的角度看待事物。&热情——当目标正确时，你将所有这些支持、可靠性和想象力应用到他们认为会改变人们生活的事情上——无论是通过全球倡议与贫困作斗争，还是仅仅让客户开心。&忠诚和勤奋——只要一点时间，这种热情就会变成忠诚——你的个性通常会对他们致力于的想法和组织形成情感依恋。任何没有通过良好、努力的工作来履行义务的事情都会辜负他们自己的期望。&但&过于谦虚和害羞——温顺的人将继承地球，但如果他们根本得不到认可，那将是一条漫长的道路。&把事情看得太个人化——辩护人很难区分个人情况和非个人情况——毕竟，任何情况仍然是两个人之间的互动——冲突或批评带来的任何消极情绪都可以从他们的职业生涯中延续到他们的个人生活中。&压抑他们的感受——你人格类型的人是私密的，非常敏感，非常内化他们的感受。就像你保护他人感情的方式一样，他们也必须保护自己的感情，。&超负荷自己——他们强烈的责任感和完美主义与这种对情绪冲突的厌恶相结合，你很容易让自己超负荷——或被他人超负荷——因为他们默默地努力满足每个人的期望。&不愿改变——这些挑战可能特别难以解决，因为你在他们的决定中高度重视传统和历史。有时情况需要达到一个临界点，你才会被环境或所爱之人的强烈个性说服而改变路线。&过于利他主义——这一切都被你的利他主义的美妙品质所强化和强化。",
        "INFJ": "创意——你喜欢为他们关心的人找到完美的解决方案。生动的想象力和强烈的同情心使你成为优秀的顾问。&见地——你通常会努力摆脱表面现象并触及事物的核心。这可以让他们有一种近乎不可思议的能力来理解人们的真实动机、感受和需求。&原则——你可以是令人信服和鼓舞人心的沟通者，他们的理想主义甚至可以说服最顽固的怀疑论者。&热情——你可以一心一意地追求自己的理想，这可能会让其他人措手不及。也就是说，你对他们所选择的事业的热情是他们个性的一个关键方面。&利他主义——他们倾向于考虑自己的行为如何影响他人，他们的目标是帮助周围的人，让世界变得更美好。&但&对批评敏感—在面对批评和冲突时可能会变得防御，尤其是在涉及到你内心深处的问题时。&不愿敞开心扉——你重视诚实，但他们也很私密。他们可能会发现很难敞开心扉，并且对自己的挣扎感到脆弱。&完美主义——理想主义的你不断关注不完美之处并想知道他们是否应该寻找更好的东西，可能会发现很难欣赏他们的工作、生活环境或人际关系。&避免平凡——你往往受到生活中有更大目标的感觉的激励。可能认为将他们的远大愿景分解成小的、可管理的步骤是乏味或不必要的。&容易倦怠——你的完美主义和矜持可能让他们没有多少发泄情绪的选择。&.",
        "INTJ": "理性——对你来说，几乎任何情况都可以成为扩展知识和磨练理性思维能力的机会。可以为最棘手的问题设计创造性的解决方案。&知情——致力于形成理性的、基于证据的意见。你会根据研究和分析得出结论。这使你有足够的自信来支持自己的想法，即使面对分歧也是如此。&独立——富有创造力和自我激励的你努力以自己的方式做事。&坚定——你的个性是雄心勃勃且以目标为导向的。你对成功意味着什么有清晰的愿景，几乎没有什么可以阻止你将这些愿景变为现实。&好奇——你对新想法持开放态度——只要这些想法是理性的和基于证据的，但你天生持怀疑态度，特别喜欢另类或相反的观点。&多才多艺——你喜欢潜入各种挑战。你的好奇心和决心可以帮助人们在广泛的努力中取得成功。&但&傲慢——你可能知识渊博，但你并非万无一失。你的自信会使你对其他人的有用意见视而不见——尤其是任何你认为智力低下的人。&不屑一顾——对于你来说，理性为王。不幸的是，忽视情绪本身就是一种偏见——它会影响你的判断。&过于挑剔——你很自控，尤其是在思想和感情方面。但可能你会以自己的标准要求的他人。&好斗——你讨厌盲目地跟随任何事情而不理解为什么。浪漫无知——你无情的理性可能导致你对浪漫感到沮丧。你可能会对内心的事情变得愤世嫉俗，甚至质疑爱和联系的重要性。",
        "ISTP": "乐观和精力充沛——你们通常在某些项目或其他项目中竭尽全力。你性格类型的人（尤其是自信的人）性格开朗、心地善良，很少感到压力过大，他们更愿意随波逐流。&创造性和实用性——在实用的东西、机械和工艺方面，你们非常富有想象力。新颖的想法很容易出现，他们喜欢用手将它们付诸实践。&自发性和理性——将自发性与逻辑相结合，你可以毫不费力地转换思维方式以适应新情况，从而使他们变得灵活而多才多艺。&知道如何确定优先级——这种灵活性伴随着一些不可预测性，但你人格能够储存他们的自发性以备不时之需，在最需要的时候释放他们的能量。&危机中的伟大——凭借所有这些动手的创造力和自发性，难怪你在危机情况下是天生的。具有这种性格类型的人通常会享受一点身体风险，并且当情况需要时，他们不怕弄脏自己的手。&但&固执——就像你们随波逐流一样容易，他们也可以完全忽略它，并且通常会朝着另一个方向前进，很少道歉或敏感。&麻木不仁——你使用逻辑，即使当他们试图以同理心和情感敏感性半途而废时，它似乎也很少能完全正确，即使有什么话也说不出来。&私密和矜持——众所周知，你的个性很难被了解。他们是真正的内向者，将个人事务保密，而且通常更喜欢沉默而不是闲聊。&容易无聊——你喜欢新奇事物，这使他们成为优秀的修补匠，但在长期关注事物时，可靠性要低得多。一旦理解了某些东西，你倾向于简单地转向新的和更有趣的东西。&不喜欢承诺——长期承诺对你来说尤其繁重。他们更喜欢日复一日地处理事情，长时间被锁定的感觉是彻头彻尾的压抑。这可能是你恋爱关系中的一个特殊挑战。&冒险行为——这种固执、难以接受他人情绪、专注于当下以及容易感到无聊会导致不必要和无益的边界推动，只是为了好玩。",
        "ISFP": "迷人——你性格类型的人轻松而热情，他们的“生活和让生活”的态度自然使他们讨人喜欢和受欢迎。&对他人敏感——你很容易与他人的情绪联系起来，帮助他们建立和谐和善意，并尽量减少冲突。&富有想象力——你的个性非常了解他人的情绪，他们利用创造力和洞察力来构思大胆的想法，传达人们的心声。&充满激情——在你安静的害羞之下，跳动着一颗强烈的感情。当具有这种性格类型的人陷入令人兴奋和有趣的事情时，他们可以将其他所有事情都抛诸脑后。&好奇——想法很好，但你需要自己去看看和探索他们的想法是否正确。围绕科学展开的工作似乎与他们的特点不相称。&但&极度独立——言论自由通常是你的首要任务。任何与此相冲突的东西，比如传统和硬性规则，都会给你的人格造成一种压迫感。这可能会使结构更严格的学者和工作成为挑战。&不可预测——你不喜欢长期的承诺和计划。积极避免为未来做计划的倾向可能会导致你的浪漫关系紧张，并在以后的生活中陷入财务困境。&容易紧张——你活在当下，充满情感。当情况失控时，这种性格类型的人（尤其是暴躁的人）可能会关闭，失去他们特有的魅力和创造力，转而咬牙切齿。&过度竞争——你可以将小事升级为激烈的竞争，在他们寻求荣耀的过程中拒绝长期成功，并且在失败时不高兴。&波动的自尊——要求量化技能，但这与你的敏感性和艺术性强项相去甚远。你的努力常常被忽视，这是一种伤害性和破坏性的打击，尤其是在生命的早期。&.",
        "INFP": "善解人意——你关心抽象意义上的其他人。由于这种敏感性，你往往是体贴和善良的，他们讨厌伤害任何人的想法，即使是无意的。&慷慨——你很少喜欢以牺牲他人为代价取得成功。这些人希望为一个可以听到每个声音并且没有人的需求得不到满足的世界做出贡献。&思想开放——宽容和接受，你尽量不去评判任何人的信仰、生活方式或决定。这是一种更喜欢同情而不是挑剔的性格类型，许多你即使对那些做错的人也感到同情。&创意——你喜欢从非传统的角度看待事物。没有什么比让他们的思想在各种想法、可能性和白日梦中游荡更能让他们快乐的了。&充满激情——具有这种性格类型的人可能并不总是直言不讳，但这并不会削弱他们对与他们的信仰和信念相符的事业的强烈感情。&但&不切实际——具有这种性格类型的人可能是绝望的浪漫主义者。当现实不可避免地达不到他们的梦想时，这会使你感到失望。&自我隔离——你渴望与他人建立联系。在新环境中，不愿意以有助于他们结交新朋友或参与新社区的方式将自己摆在那里。因此，具有这种性格类型的人有时可能会感到孤独或孤立。&注意力不集中——你富有想象力、内省的天性并不总是有助于提高工作效率。问题不在于他们没有能力，而是当他们陷入不同的想法和理想以致无法采取行动时遇到问题。&情感脆弱——这些人的情感协调是他们最大的优势之一。但除非你建立界限，否则他们可能会吸收他人的负面情绪或态度。&不顾一切地取悦——冲突往往会给渴望和谐与接纳的你带来压力。不幸的是，调解者取悦他人的愿望会耗尽他们的精力，使他们的内在智慧和对自己需求的意识黯然失色。&自我批评——你相信他们独特的潜力，他们迫切希望实现它。走得太远，这种自我批评会阻止你，导致他们放弃甚至最亲爱的梦想。",
        "INTP": "分析——你会分析你所遇到的一切，从研究数据到周围人的行为。这让你有能力发现其他性格类型可能忽略的意想不到的模式和联系。&原创——多亏了你不懈的想象力，你可以想出大多数人不会想到的创造性的、违反直觉的想法。&思想开放——你被好奇心和强烈的学习欲望所驱动。倾向于接受新的想法和做事方式——只要这些想法得到合理推理的支持。&好奇——总是在寻找新的追求、爱好和研究领域。当灵感来袭时，你会全力以赴，全力以赴，尽其所能地学习一切。&客观——你关心真相。你不想在意识形态或接受的想法中得到安慰，而是想了解事物表面下的真实情况。&但&脱节——你可能会迷失在自己的思路中，即使你和其他人在一起。这会使你感到与其他人脱节，尤其是在大型社交聚会中。&麻木不仁——你认为理性是通往更美好、更幸福世界的关键。你可能会低估情感、同情心、礼仪和传统等非理性价值观的重要性。&不满意——你不禁想象事情会比现在更好。你不断地试图重新发明轮子，而不是可靠地解决你的需求和责任。&不耐烦——你以你的知识和分享你的想法为荣。然而，当谈到解释你的理由时，你并不总是有耐心。&完美主义——你想要把事情做好，但你对完美的追求可能会妨碍你。你也可能会放弃与你心目中的理想愿景不符的项目。&.",
        "ESTP": "大胆——企业家性格类型的人充满活力和活力。对于企业家来说，没有比突破界限、发现和使用新事物和新想法更大的乐趣了。&理性和实用——企业家热爱知识和哲学，但不是为了他们自己。企业家个性的乐趣在于找到可行的想法并深入研究细节，以便他们可以使用它们。&原创——结合他们的大胆和实用性，企业家喜欢尝试新的想法和解决方案。他们以其他人不会想到的方式将事物组合在一起。&洞察力——这种独创性得益于企业家能够注意到事情何时发生变化——以及何时需要改变。习惯和外表的微小变化对企业家来说很重要，他们利用这些观察来帮助建立与他人的联系。&直接——这种感知技能不用于智力游戏——企业家更喜欢用直接和事实的问题和答案进行清晰的交流。事情就是这样。&但&麻木不仁——对于企业家来说，感觉和情绪仅次于事实和“现实”。情绪激动的情况是尴尬、不舒服的事情，企业家直率的诚实在这里无济于事。这些人通常也很难承认和表达自己的感受。&不耐烦——企业家按照自己的节奏行动以保持兴奋。因为别人“不明白”或者不得不长时间专注于一个细节而放慢速度，这对企业家来说是极具挑战性的。&容易冒险——这种不耐烦可能会导致企业家在不考虑长期后果的情况下进入未知领域。企业家个性有时会故意冒着额外的风险来对抗无聊。&非结构化——企业家看到机会——解决问题、进步、享受乐趣——并抓住时机，在此过程中往往无视规则和社会期望。这可能会完成任务，但会产生意想不到的社会影响。&可能会错过更大的画面——活在当下会导致企业家只见树木不见森林。这种性格类型的人喜欢在此时此地解决问题，也许是太过分了。&挑衅——企业家不会被束缚。重复、强硬的规则、听课时安静地坐着——这不是企业家的生活方式。他们以行动为导向，亲力亲为。",
        "ESFP": "大胆——表演者不以退缩着称。想要体验所有可以体验的事物，具有表演者性格类型的人不介意在没有其他人愿意的情况下走出自己的舒适区。&原创——传统和期望对于表演者来说是次要的，如果有考虑的话。表演者喜欢尝试新风格，并不断寻找在人群中脱颖而出的新方法。&美学和表演技巧——表演者不仅仅停留在服装上，他们还将艺术创造力注入他们的言行。每天都是一场表演，表演者喜欢表演。&实用——对于表演者来说，这个世界是用来感受和体验的。真相比小说更奇怪，表演者更喜欢看和做，而不是对“假设”进行哲学思考。&观察力——所有这些都集中在此时此地、做事和表演上，当谈到注意到真实、有形的事物和变化时，表演者是天生的，这是有道理的。&但&敏感——表演者（尤其是动荡的人）非常情绪化，非常容易受到批评——他们会觉得自己被逼到了角落，有时反应很糟糕。这可能是表演者最大的弱点，因为它很难解决任何其他暴露出来的弱点。&冲突厌恶——表演者有时会完全忽略并避免冲突。他们倾向于说和做需要做的事情来摆脱这种情况，然后转向更有趣的事情。&容易无聊——没有持续的兴奋，表演者会找到自己创造的方法。冒险行为、自我放纵以及长期计划中的一时快乐都是表演者经常涉足的事情。&可怜的长期计划者——事实上，表演者很少为未来制定详细的计划。对他们来说，事情来了就来了，他们很少花时间去安排步骤和后果，他们相信他们可以随时改变——即使是可以计划的事情。&不专心——任何需要长期奉献和专注的事情对表演者来说都是一个特殊的挑战。在学术界，经典文学等密集、不变的学科比心理学等更具活力、相关的学科要困难得多。&.",
        "ENFP": "好奇——你几乎可以在任何事物中找到美丽和魅力。这些富有想象力和思想开放的人不怕冒险超越他们的舒适区，寻找新的想法、体验和冒险。&洞察力——对于这种性格类型的人来说，没有人是不重要的——这可能解释了他们如何能够捕捉到另一个人的情绪或表情的最细微的变化。&热情——当某件事抓住了他们的想象力并激发了他们的灵感时，你希望与任何愿意倾听的人分享。他们同样渴望听到其他人的想法和意见——即使这些想法与他们自己的想法大不相同。&优秀的沟通者——你充满了要说的话，但他们也可以是有爱心的听众。这使他们具有几乎无与伦比的能力，可以与各种各样的人进行积极而愉快的对话——即使是那些不太善于交际或不讨人喜欢的人。&喜庆——你可能会为深入、有意义的对话而生活，但他们也可以是自发和轻松的。这些人知道如何在当下找到乐趣和快乐——没有什么比与他人分享快乐更能给他们带来快乐的了。&但&取悦他人——大多数你对被不喜欢的前景感到不安。为了维持和平，他们可能会在对他们重要的事情上妥协，或者让其他人对他们不好。&不专心——一个新项目的快感——尤其是与其他人合作的项目——可以激发出最好的你。但这种性格类型以拥有不断变化的兴趣而闻名，这意味着你可能会发现长期保持纪律和专注是一项挑战。&杂乱无章——你的热情是传奇的，但它并没有延伸到一切。具体来说，这种性格类型的人可能会尽量避免无聊、实际的事情，比如家务、维护或文书工作。&过于随和——你的性格感觉被召唤来提升他人，每当有人向他们寻求指导或帮助时，他们可能会发现自己说“是”。&过度乐观——乐观可能是这种性格类型的主要优势之一。但你的乐观前景可能导致他们做出善意但幼稚的决定，例如相信没有赢得信任的人。&躁动不安——凭借积极、乐观的态度，你很少在外面看起来心烦意乱或不满意。",
        "ENTP": "知识渊博——你很少放弃学习新事物的好机会，尤其是抽象概念。具有你性格类型的人只会觉得它很吸引人。&思维敏捷——你的头脑非常灵活，能够毫不费力地从一个想法转换到另一个想法，利用积累的知识来证明他们认为合适的观点或对手的观点。&原创——对传统没有多少依恋，你从广泛的知识库中搜索不同的想法，用一点原始的创造力将它们结合在一起，形成大胆的新想法。&优秀的头脑风暴者——对于你来说，没有什么比从各个角度分析问题以找到最佳解决方案更令人愉快的了。&魅力——你的自信、敏捷的思维以及以新颖的方式将不同的想法联系起来的能力创造了一种既迷人又有趣且信息丰富的交流方式。&但&非常有争议——如果你有什么喜欢的，那就是辩论一个想法时心理上的锻炼。&麻木不仁——你如此理性，经常误判他人的感受，并将他们的辩论推向他人的容忍限度之外。&不宽容——除非人们能够在一轮心理辩论中支持他们的想法，否则你可能不仅会忽略这些想法，还会忽略一起讨论的人。&难以集中注意力——对你来说，无聊来得太容易了，新鲜的想法才是解决他们跳跃思维的方案——尽管不一定有用。&不喜欢实际问题——你的性格通常会对实际问题失去兴趣，结果往往是他们的计划从未实施过。&.",
        "ESTJ": "敬业——看到事情完成几乎是总经理的道德义务。任务不会因为变得困难或无聊而简单地被放弃——具有你的人会在它们是正确的事情时接受它们，只要它们仍然是正确的事情，它们就会完成。&意志坚强——坚强的意志使这种奉献成为可能，总经理不会因为简单的反对而放弃自己的信念。并且必须清楚地证明他们的立场是错误的，他们的立场才能让步。&直接和诚实——总经理信任事实远胜于抽象的想法或观点。直截了当的陈述和信息为王，而总经理则以诚实作为回报（无论是否需要）。&忠诚、耐心和可靠——总经理们努力体现真实性和可靠性，认为稳定性和安全性非常重要。当总经理们说他们会做某事时，他们会信守诺言，使他们成为家庭、公司和社区中非常负责任的成员。&享受创造秩序的乐趣——混乱使事情变得不可预测，而最需要的时候是不可信的——考虑到这一点，总经理们通过建立规则、结构和明确的角色来努力在他们的环境中创造秩序和安全。&但&不灵活和固执——如此执着于行之有效的问题是。在得到证实之前，一切都是意见，而总经理人士不愿相信意见足够长的时间以使其有机会。对非常规情况感到不舒服——总经理们是传统的坚定拥护者，当突然被迫尝试未经审查的解决方案时，他们会变得不舒服和压力大。&判断性——总经理对什么是对、错和社会可接受的有强烈的信念。总经理们创造秩序的冲动往往延伸到所有事物和每个人，而忽略了完成事情有两种正确方法的可能性。&过于关注社会地位——总经理们以尊重他们的朋友、同事和社区为荣，他们非常关心公众舆论。可能会过于专注于满足他人的期望，以至于无法满足自己的需求。&难以放松——这种对尊重的需要促进了维护自己尊严的需要，这使得即使在乐趣中也很难放松和放松，以免看起来很傻。&难以表达情感——这是总经理最大弱点的所有证据：表达情感和感受同理心。具有你的人如此沉迷于事实和最有效的方法，以至于他们忘记了思考什么让别人快乐，或者他们的敏感性。",
        "ESFJ": "较强的实践能力——你是日常任务和日常维护的优秀管理者，乐于确保与他们亲近的人得到很好的照顾。&强烈的责任感——具有你人格类型的人具有强烈的责任感，并努力履行自己的义务，尽管有时这可能更多来自社会期望而不是内在驱动力。&非常忠诚——你非常重视稳定性和安全性，渴望维持现状，这使他们非常忠诚和值得信赖的合作伙伴和员工。&敏感和热情——帮助确保稳定，你人格寻求和谐并深切关心他人的感受，小心不要冒犯或伤害任何人。你是强大的团队成员，双赢的局面是微笑的组成部分。&善于与他人联系——这些品质结合在一起，使你变得社交、舒适和受欢迎。你人士有强烈的“归属感”需求，并且不介意闲聊或追随社会线索，以帮助他们在社区中发挥积极作用。&但&担心他们的社会地位——这些弱点与一个主要的优点有关：你对社会地位和影响力的关注，这会影响他们做出的许多决定，可能会限制他们的创造力和开放性。&不灵活——你非常重视社会可接受的事物，并且可能非常谨慎，甚至对任何非传统或主流之外的事物都持批评态度。&不愿创新或即兴发挥——正如他们可能批评他人的“不寻常”行为一样，你也可能不愿意走出自己的舒适区，通常是因为害怕（或只是显得）与众不同。&容易受到批评——改变这些倾向尤其具有挑战性，因为你非常厌恶冲突。如果有人，尤其是与他们亲近的人，批评他们的习惯、信仰或传统，你人格会变得非常防御和伤害。&经常太需要——你需要听到和看到很多赞赏。如果他们的努力没有被注意到，具有你人格类型的人可能会开始寻求赞美，试图让他们确信自己受到了多大的重视。&太无私——另一方面，你有时会试图通过溺爱来建立自己的价值，这会很快让那些不需要的人不知所措，最终使其不受欢迎。此外，你在此过程中经常忽略自己的需求。",
        "ENFJ": "乐于接受——你有强烈的意见，但远非封闭的思想。他们认识到让他人充分表达自己的重要性。即使你不同意某人的观点，他们也承认那个人有权说出自己的真相。&可靠——没有什么比让一个人或他们相信的事业失望的前景更让你感到困扰的了。可以指望这种性格类型的人看到他们的承诺和责任——即使很难做到。&热情——你远非无聊的行善者。这些类型的人充满兴趣，他们非常乐于追求自己的爱好——无论是远足、烹饪、跳舞、种植室内植物，还是完全其他的事情。&利他主义——这些人以强烈渴望成为积极变革的力量而闻名。你们真诚地相信，如果他们把人们聚集在一起，他们就能创造一个美好的世界。&魅力超凡——坚定且鼓舞人心，你经常找到自己的方式进入领导角色。无论他们是垒球队的队长还是世界舞台上的领袖，他们都很少忘记自己的主要目标：为他人服务。&但&不切实际——许多你给自己施加压力，以纠正他们遇到的每一个错误。但无论这些人如何努力，解决世界上所有的问题对他们来说都是不现实的。&过于理想主义——你往往对什么是对什么是错有清晰的想法。他们经常认为每个人都分享这些基本原则——或者，至少，每个人都应该分享这些原则。&居高临下——这种性格类型的人喜欢教别人，尤其是对他们来说非常重要的原因和信仰。但是，有时，你试图“启发”他人的行为可能会被视为傲慢——不幸的是，这不是说服他人的最有效策略。&强烈——在自我提升方面，你很少缺乏精力或决心。但他们可能没有认识到并非每个人都具有这些品质。&过分善解人意——同情心是这种性格类型的最大优势之一。但你倾向于把别人的问题当作自己的问题——这种习惯会让他们身心疲惫。&.",
        "ENTJ": "高效——你不仅将低效率视为一个问题，而且将时间和精力从所有的未来目标中抽走。&精力充沛——你不会因为这个过程而感到精力充沛，而是真正享受在执行计划和目标时带领团队前进的乐趣。&自信——表达自己的意见，并相信自己作为领导者的能力。&意志坚强——你个性努力实现的目标，但实际上没有什么比在奔向终点线的过程中迎接每一个障碍的挑战更让满意的了。&战略思想家——你体现了即时危机管理与应对更大计划的挑战和步骤之间的区别，并且以检查问题的每个角度而闻名。&但&固执和霸道——有时所有这些信心和意志力都可能太过分了。&不宽容——不支持任何偏离主要目标的想法，更不支持基于情感考虑的想法。&不耐烦——有些人比其他人需要更多的思考时间，这对于思维敏捷的你来说是无法忍受的延迟。&傲慢——你性格尊重敏捷的想法和坚定的信念，尊重自己的品质，看不起那些不匹配的人。&情绪处理不当——这种性格类型的人经常践踏他人的感情，不经意间伤害了的伴侣和朋友，尤其是在情绪激动的情况下。&.",
      },
      Personality: [
        { "No": "01", "Name": "ISTJ" }, { "No": "02", "Name": "ISFJ" }, { "No": "03", "Name": "INFJ" }, { "No": "04", "Name": "INTJ" },
        { "No": "05", "Name": "ISTP" }, { "No": "06", "Name": "ISFP" }, { "No": "07", "Name": "INFP" }, { "No": "08", "Name": "INTP" },
        { "No": "09", "Name": "ESTP" }, { "No": "10", "Name": "ESFP" }, { "No": "11", "Name": "ENFP" }, { "No": "12", "Name": "ENTP" },
        { "No": "13", "Name": "ESTJ" }, { "No": "14", "Name": "ESFJ" }, { "No": "15", "Name": "ENFJ" }, { "No": "16", "Name": "ENTJ" }
      ],
      idx: 0,
      info: "",
      OPa: "",
      OPb: "",
      recentNum: 0,
      nowTime: "",
      Type: "",
      Tno: "",
      Tcontent: [],
      nowAns: "",
    };
  },
  created() {
    this.username = window.sessionStorage.getItem("Name");
    this.readMe();
    this.getAll();
  },
  methods: {
    readMe() {
      this.readmeVisible = true;
    },
    async getAll() {
      const { data: res } = await this.$http.post("api/query/questionAll");
      this.questionlist = res.Data["ret"];
      // console.log(this.questionlist)
      this.info = this.questionlist[this.idx].Info
      this.OPa = this.questionlist[this.idx].OPa
      this.OPb = this.questionlist[this.idx].OPb
      const { data: ret } = await this.$http.post("api/query/result", {
        Sno: "",
        Pno: "",
      });
      var time = this.getago(new Date, -30)
      for (var i = 0; i < ret.Data["ret"].length; i++) {
        if (ret.Data["ret"][i].Time.substring(0, 10) > time) {
          this.recentNum++;
        }
      }
    },
    async logout() {
      const { data: res } = await this.$http.get("api/jwt/delete");
      window.sessionStorage.clear();
      console.log(res);
      this.$message.success("退出成功");
      this.$router.push("/");
    },
    async getHistory() {
      this.infoVisible = true;
      const { data: res } = await this.$http.post(
        "/api/query/resultSno",
        { Sno: this.No }
      );
      let temp = [];
      let idx = 0;
      // console.log(res)
      // console.log(ret)
      for (var i = 0; i < res.Data["ret"].length; i++) {
        let each = {
          Time: "", Type: "", Ans: ""
        }
        each.Time = res.Data["ret"][i].Time
        each.Ans = res.Data["ret"][i].Ans
        for (var j = 0; j < 16; j++) {
          if (res.Data["ret"][i].Pno == this.Personality[j].No) {
            each.Type = this.Personality[j].Name;
          }
        }
        temp[idx++] = each;
      }
      this.Result = temp;
    },
    chooseA() {
      if (this.idx == 92) {
        this.excuteResult()
      } else {
        this.answer[this.questionlist[this.idx].AWa]++;
        this.idx++;
        this.info = this.questionlist[this.idx].Info;
        this.OPa = this.questionlist[this.idx].OPa;
        this.OPb = this.questionlist[this.idx].OPb;
      }
      this.nowAns += "1"
    },
    chooseB() {
      if (this.idx == 92) {
        this.excuteResult()
      } else {
        this.answer[this.questionlist[this.idx].AWb]++;
        this.idx++;
        this.info = this.questionlist[this.idx].Info;
        this.OPa = this.questionlist[this.idx].OPa;
        this.OPb = this.questionlist[this.idx].OPb;
      }
      this.nowAns += "0"
    },
    getago(start, value) {
      var date = new Date(start);
      var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + +value);
      var Y = newDate.getFullYear();
      var M = newDate.getMonth() + 1;
      M = M < 10 ? '0' + M : M;
      var D = newDate.getDate();
      D = D < 10 ? '0' + D : D;
      return `${Y}-${M}-${D}`;
    },
    getCurrentTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      mm = mm < 10 ? '0' + mm : mm;
      let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
      let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      this.nowTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    async excuteResult() {
      this.resVisible = true;
      var ret = "";
      ret += this.answer["E"] > this.answer["I"] ? "E" : "I"
      ret += this.answer["S"] > this.answer["N"] ? "S" : "N"
      ret += this.answer["T"] > this.answer["F"] ? "T" : "F"
      ret += this.answer["J"] > this.answer["P"] ? "J" : "P"
      this.Type = this.resType[ret];
      this.Tno = ret;
      this.Tcontent = this.resContent[ret].split('&', 12)
      var Pno = "";
      for (var i = 0; i < 16; i++) {
        if (ret == this.Personality[i].Name) {
          Pno = this.Personality[i].No
        }
      }
      this.getCurrentTime();
      const { data: ans } = await this.$http.post("api/insert/result", {
        Sno: this.No,
        Pno: Pno,
        Time: this.nowTime,
        Ans: this.nowAns
      });
      console.log(ans)
      this.idx = 0;
      this.nowAns = "";
      this.info = this.questionlist[this.idx].Info;
      this.OPa = this.questionlist[this.idx].OPa;
      this.OPb = this.questionlist[this.idx].OPb;
    },
    doAgain() {
      this.resVisible = false;
      this.idx = 0;
      this.info = this.questionlist[this.idx].Info;
      this.OPa = this.questionlist[this.idx].OPa;
      this.OPb = this.questionlist[this.idx].OPb;
      this.answer = { "E": 0, "I": 0, "S": 0, "N": 0, "T": 0, "F": 0, "J": 0, "P": 0 };
    },
    handleClose(done) {
      ElMessageBox.confirm('您确认要关闭性格分析报告吗？')
        .then(() => {
          done()
        })
        .catch(() => {
          // catch error
        })
    },
    ansDialog(Time) {
      this.ansVisible = true;
      var ans = ""
      for (var i = 0; i < this.Result.length; i++) {
        if (this.Result[i].Time == Time) {
          ans = this.Result[i].Ans
        }
      }
      for (i = 0; i < ans.length; i++) {
        let each = { "No": i + 1, "ch": "" }
        if (ans[i] == '1') {
          each.ch = "A." + this.questionlist[i].OPa
        } else {
          each.ch = "B." + this.questionlist[i].OPb
        }
        this.choice[i] = each
      }
    }
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding-left: 0%;
  align-items: center;
  color: rgb(0, 0, 0);
  font-size: 20px;

  >div {
    display: flex;
    align-items: center;

    span {
      margin-left: 20px;
    }
  }
}

.el-main {
  --el-main-padding: 40px;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
}

.toggle-button {
  background-color: #ffffff;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.card-header {
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
}

.main-title {
  margin: auto;
  text-align: center;
  color: #41464b;
  font-size: 50px;
}

.main-title-sub {
  text-align: center;
  color: gray;
  font-size: 2%;
}

.text-box {
  margin-bottom: 40px;
}

.grid-content {
  border-radius: 4px;
  min-height: 5px;
  min-width: 100px;
  text-align: center;
}

.card1 {
  height: 5%;
  width: 65%;
}

.button {
  height: 50px;
  width: 500px;
  margin: 10px;
  border-radius: 10px;
}
</style>
